<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增删查改</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="学号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="生日"
                    prop="birthday">
            </el-table-column>
            <el-table-column
                    label="学院"
                    prop="college">
            </el-table-column>
            <el-table-column
                    label="专业"
                    prop="major">
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="modify(scope.row)"
                           >修改</el-button>
                    <el-popconfirm
                            title="这是一段内容确定删除吗？"
                            @confirm="deleteStudent(scope.row.id)"
                    >
                        <el-button size="mini" type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="totalNum"
                @next-click="getList(pageNum+1)"
                @prev-click="getList(pageNum-1)"
                @current-change="handleCurrentChange"
        >
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                >

            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-input type="text" v-model="ruleForm.id" v-show="false"></el-input>
                <el-form-item label="姓名" >
                    <el-input type="text" v-model="ruleForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="生日" >
                    <el-input type="date" v-model="ruleForm.birthday"></el-input>
                </el-form-item>
                <el-form-item label="学院" >
                    <el-input v-model="ruleForm.college"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="ruleForm.major"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
              </span>
        </el-dialog>
    </div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            tableData:[],
            search: '',
            url: 'http://localhost:8080/crud',
            pageNum: 1,
            pageSize: 10,
            dialogVisible: false,
            ruleForm: {},
            totalNum: 0
        },
        methods:{
            handleCurrentChange(pageNum){
                this.getList(pageNum)
            },
            deleteStudent(id){
                let that = this
                axios.get(this.url+'/delete?id='+id).then(function (res) {
                    if(res.data.success){
                        that.$message({
                            type: 'success',
                            message: res.data.data
                        })
                        that.getList(that.pageNum)
                    }else{
                        that.$message({
                            type: 'error',
                            message: res.data.message
                        })
                    }
                }).catch(function (res) {
                    console.log(res)
                })
            },
            getList(pageNum){
                let that = this
                axios.post(this.url+'/list',{
                    pageNum: pageNum,
                    pageSize: this.pageSize
                }).then(function (res) {
                    console.log(res)
                    that.tableData = res.data.data.records
                    that.totalNum = res.data.data.total
                }).catch(function (error) {
                    alert('error！')
                    console.log(error)
                })
            },
            modify(student){
              this.ruleForm = student
              this.dialogVisible = true
            },
            resetForm(){
                this.ruleForm = {}
            },
            submitForm(){
                console.log(this.ruleForm)
                let that = this
                if(!this.ruleForm.id){
                    axios.post(this.url+'/add',this.ruleForm).then(function (res) {
                        console.log(res)
                        if(res.data.success){
                            that.$message({
                                type: 'success',
                                message: res.data.data
                            })
                            that.getList(that.pageNum)
                            that.ruleForm = {}
                            that.dialogVisible = false
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.data.message
                            })
                        }
                    }).catch(function (error) {
                        alert('error！')
                        console.log(error)
                    })
                }else{
                    axios.post(this.url+'/modify',this.ruleForm).then(function (res) {
                        console.log(res)
                        if(res.data.success){
                            that.$message({
                                type: 'success',
                                message: res.data.data
                            })
                            that.getList(1)
                            that.ruleForm = {}
                            that.dialogVisible = false
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.data.message
                            })
                        }
                    }).catch(function (error) {
                        alert('error！')
                        console.log(error)
                    })
                }
            }
        },
        created() {
           this.getList(1)
        }
    })
</script>
</body>
</html>